<script lang="ts" setup name="XtxNumbox">
// const props = defineProps({
//   modelValue: {
//     type: Number,
//     default: 1,
//   },
// min: {
//   type: Number,
//   default: 1
// },
// max: {
//   type: Number,
//   default: 1
// }
// label: {
//   type: String,
//   default: ''
// }
// })
import { getCurrentInstance, ComponentInternalInstance } from 'vue'
let { proxy } = getCurrentInstance() as ComponentInternalInstance
let {
  modelValue = 1,
  min = 1,
  max = 1,
  label = '',
} = defineProps<{
  modelValue: number
  min?: number
  max?: number
  label?: string
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', v: number): void
}>()
// 减
const sub = () => {
  // 小于最小值 控制等于最小值
  if (modelValue <= min) return
  emit('update:modelValue', modelValue - 1)
}
// 加
const add = () => {
  // 大于最小值 控制等于最大值
  if (modelValue >= max) return
  emit('update:modelValue', modelValue + 1)
}
// 手动输入
// const ipt = document.createElement('input')
const changeCount = (e: Event) => {
  const el = e.target as HTMLInputElement // dom元素 输入框 明确类型
  let value = +el.value // 输入框的值
  // console.log(typeof value)
  // 1. 禁止输入非数字 (检测数据是否是数字类型)
  // if (isNaN(value)) value = min
  if (!/^\d+$/.test(el.value)) value = min
  // 2. 最小值的限制
  if (value <= min) value = min
  // 3. 最大值的限制
  if (value >= max) value = max
  // 先输入一个负数 视图会变,  再输入一个负数, 视图就不会变了
  // vue 在做虚拟dom对比的时候  -8 => 1  -9 => 1
  // 强制更新的方法  vue2中 直接这么写 this.$forceUpdate()
  proxy!.$forceUpdate()
  emit('update:modelValue', value)
}
</script>
<template>
  <div class="xtx-numbox">
    <div class="label" v-if="label">{{ label }}</div>
    <div class="numbox">
      <a
        href="javascript:;"
        :class="{ disabled: modelValue <= min }"
        @click="sub"
        >-</a
      >
      <input type="text" :value="modelValue" @input="changeCount" />
      <a
        href="javascript:;"
        :class="{ disabled: modelValue >= max }"
        @click="add"
        >+</a
      >
    </div>
  </div>
</template>

<style scoped lang="less">
.xtx-numbox {
  display: flex;
  align-items: center;
  .label {
    width: 60px;
    color: #999;
    padding-left: 10px;
  }
  .numbox {
    width: 120px;
    height: 30px;
    border: 1px solid #e4e4e4;
    display: flex;
    > a {
      width: 29px;
      line-height: 28px;
      text-align: center;
      background: #f8f8f8;
      font-size: 16px;
      color: #666;

      &:first-of-type {
        border-right: 1px solid #e4e4e4;
      }
      &:last-of-type {
        border-left: 1px solid #e4e4e4;
      }
      &.disabled {
        cursor: not-allowed;
        background-color: #ccc;
      }
    }
    > input {
      width: 60px;
      padding: 0 5px;
      text-align: center;
      color: #666;
    }
  }
}
</style>
